<template>
    <div class="calendar-query">
        <div class="content-left">
            <div class="calendar-list-heard">
                <div class="rectangle"></div>
                <div class="heard-Text">日历列表</div>
            </div>
            <div class="calendar-list">
                <div
                    class="calendar-type"
                    :class="item.current ? 'current-type' : ''"
                    v-for="(item, index) in calendarType"
                    :key="index"
                    @click="clickCalendarType(item)"
                >
                    --交易日历-{{ item.label }}
                </div>
            </div>
        </div>
        <div class="content-right">
            <div class="calendar-list-heard">
                <div class="rectangle"></div>
                <div class="heard-Text">交易日历</div>
                <div class="calendar-select">
                    <div>
                        <span>年份：</span>
                        <el-select v-model="yearSelect" placeholder="请选择" size="mini">
                            <el-option v-for="item in yearOption" :key="item.value" :value="item.value"> </el-option>
                        </el-select>
                    </div>
                    <div>
                        <span>月份：</span>
                        <el-select v-model="monthSelect" placeholder="请选择" size="mini">
                            <el-option v-for="item in monthOption" :key="item.value" :value="item.value"> </el-option>
                        </el-select>
                    </div>
                    <el-button type="primary" size="mini" icon="el-icon-refresh-left" @click="upDateCalendar">更新</el-button>
                </div>
            </div>
            <CalendarQueryContent
                v-if="CalendarIs"
                :yearSelect="yearSelect"
                :monthSelect="monthSelect"
                :exchanges="exchanges"
                :tradeCalendarList="tradeCalendarList"
                :vacationHoliday="vacationHoliday"
            />
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import CalendarQueryContent from './calendar-query-content.vue';

@Component({
    name: 'CalendarQuery',
    components: {
        CalendarQueryContent,
    },
})
export default class CalendarQuery extends Vue {
    yearSelect: number = new Date().getFullYear(); // 年select值
    yearOption: any = []; // 年option值
    monthSelect: number = new Date().getMonth() + 1; // 月select值
    monthOption: any = []; // 月option值
    exchangeType: string = '001002';
    tradeCalendarList: any = []; // 交易日/假期列表
    vacationHoliday: any = [];
    exchanges: string = '上交所';
    CalendarIs: boolean = true;

    // 日历列表
    calendarType: any[] = [
        {
            label: '上交所',
            exchangeType: '001002',
            current: true, // 选中状态
        },
        {
            label: '深交所',
            exchangeType: '001003',
            current: false, // 选中状态
        },
        {
            label: '银行间',
            exchangeType: '001005',
            current: false, // 选中状态
        },
    ];
    created() {
        this.setYearMonth();
        this.getCalendarTypeList(this.exchangeType, this.yearSelect, this.monthSelect);
        this.getVacationHolidayList(this.exchangeType, this.yearSelect, this.monthSelect);
    }
    // 选择日历类型
    clickCalendarType(item) {
        this.calendarType.forEach(ele => {
            if (ele.exchangeType === item.exchangeType) {
                ele.current = true;
            } else {
                ele.current = false;
            }
        });
        this.CalendarIs = false;
        this.exchanges = item.label;
        this.exchangeType = item.exchangeType;
        this.$nextTick(() => {
            this.yearSelect = new Date().getFullYear();
            this.monthSelect = new Date().getMonth() + 1;
            this.getCalendarTypeList(item.exchangeType, this.yearSelect, this.monthSelect);
            this.getVacationHolidayList(item.exchangeType, this.yearSelect, this.monthSelect);
        });
    }
    // 获取交易日历列表数据
    getCalendarTypeList(exchangeType, yearSelect, monthSelect) {
        this.tradeCalendarList = [];
        this.$axios
            .post('/tradeCalendar/list', {
                exchangeType: exchangeType,
                month: monthSelect,
                year: yearSelect,
            })
            .then((res: any) => {
                for (var i = 0; i < res.length; i++) {
                    this.tradeCalendarList.push(res[i]);
                }
                this.CalendarIs = true;
            })
            .catch(err => {
                console.log(err);
            });
    }
    // 获取假期列表数据
    getVacationHolidayList(exchangeType, yearSelect, monthSelect) {
        this.$axios
            .post('/tradeCalendar/getVacationHoliday', {
                exchangeType: exchangeType,
                month: Number(monthSelect),
                year: Number(yearSelect),
            })
            .then((res: any) => {
                this.vacationHoliday = [];
                for (var i = 0; i < res.length; i++) {
                    this.vacationHoliday.push(res[i].substr(4, 2) + '月' + res[i].substr(6, 2) + '日');
                }
            })
            .catch(err => {
                console.log(err);
            });
    }
    // //初始化设置年份月份
    setYearMonth() {
        for (var i = new Date().getFullYear() - 15; i <= new Date().getFullYear() + 15; i++) {
            this.yearOption.push({ value: i });
        }
        for (var j = 1; j <= 12; j++) {
            this.monthOption.push({ value: j });
        }
    }
    // 更新按钮事件
    upDateCalendar() {
        var updateDate = { label: this.exchanges, exchangeType: this.exchangeType };
        this.clickCalendarType(updateDate);
    }

    @Watch('yearSelect')
    getCHolidayList(newVal, oldVal) {
        this.getVacationHolidayList(this.exchangeType, this.yearSelect, this.monthSelect);
    }
}
</script>
<style lang="scss" scoped>
@mixin publicHeard {
    height: 38px;
    margin: 10px 10px 5px 10px;
    display: flex;
    border-bottom: 1px solid #e0e6ed;
    .rectangle {
        width: 8px;
        height: 21px;
        background: #3498ff;
        margin-top: 5px;
    }
    .heard-Text {
        line-height: 32px;
        font-size: 16px;
        padding-left: 10px;
    }
}
.calendar-query {
    color: #222;
    padding: 10px;
    width: 100%;
    background: #f3f3f3;
    .content-left {
        width: 300px;
        height: calc(100vh - 68px);
        background: white;
        overflow: hidden;
        box-shadow: 5px 5px 5px #d1d1d1;
        .calendar-list-heard {
            width: 280px;
            @include publicHeard;
        }
        .calendar-list {
            width: 280px;
            height: 92%;
            background: #f0f8fa;
            margin: 0 auto;
            .calendar-type {
                font-size: 16px;
                line-height: 30px;
                padding-left: 20px;
                background: #edf5f7;
            }
            .current-type {
                background: rgb(52, 152, 255);
            }
        }
    }

    .content-right {
        width: calc(100% - 320px);
        height: calc(100vh - 68px);
        position: absolute;
        left: 320px;
        top: 10px;
        background: white;
        // overflow: auto;
        box-shadow: 5px 5px 5px #d1d1d1;
        .calendar-list-heard {
            width: calc(100% - 20px);
            @include publicHeard;
            .calendar-select {
                position: absolute;
                right: 30px;
                display: flex;
                div {
                    background: #f0f8fa;
                    margin-right: 20px;
                }
                .el-select {
                    width: 100px;
                    line-height: 32px;
                }
            }
        }
    }
}
</style>
